<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: 郝龙飞
  Date: 2021/10/29
  Time: 23:07
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@include file="../../pages/common/head.jsp" %>
<style>
    body {
        margin: 0;
        padding: 0;
    }

    #bottom {
        width: 100%;
        height: 80px;
        line-height: 80px;
        text-align: center;
        /* 方法一 */
        position: fixed;
        bottom: 0;
    }

    label {
        color: #454141;
    }
</style>
<script type="text/javascript">
    $(function () {
        $("#submit").click(function () {
            var id = $("#inputId").val();
            id = $.trim(id);//去掉前后空格
            var idPatt = /^\d{1,10}$/ ;
            var password = $("#inputPassword").val();
            password = $.trim(password);
            if (id == null || id == "" || password == null || password == "") {
                $("#msg").text("账号或密码不能为空！");
                return false;//阻止页面自动跳转
            }
            if(!idPatt.test(id)){
                $("#msg").text("账号不合法！");
                return false;
            }
        })
    })
</script>
<html>
<head>
    <title>登录页面</title>
</head>
<body style="background-color: #f6f5f5">
<div style="width: 100%;height: 50px;
background-color: #2aabd2;
text-align: center;color: white;font-size: 26px;padding-top: 8px">
    海飞丝洗发护发用品销售系统
</div>
<a href="index.jsp"><div style="margin-left: 50px"><img src="imgs/11.jpg" style="width: 300px"/></div></a>
<div style="width: 100%;height: 350px;background-color: #79d0f1">
    <div style="color: #928989;font-size: 50px;padding-left: 300px;padding-top: 120px">欢&nbsp;迎&nbsp;登&nbsp;陆</div>
    <div style=";width: 400px;height: 350px;position: absolute;right: 180px;top: 205px">
        <a href="pages/user/regist.jsp">
            <div style="margin-top: 20px;margin-left: 70px;background-color: #5ec8d2" class="btn btn-info">
                暂无账号？点击注册
            </div>
        </a>
        <div id="msg" style="color: red;margin-left: 250px;font-size: 15px">
            <c:if test="${param.login == 0}">
                账号或密码错误
            </c:if>
        </div>
        <form class="form-horizontal" method="post" action="user/userController?action=login">
            <%--账号--%>
            <div class="form-group" style="margin-top: 30px">
                <label for="inputId" class="col-sm-2 control-label">账号</label>
                <div class="col-sm-10">
                    <input name="id" type="text" class="form-control" id="inputId" placeholder="请输入账号"/>
                </div>
            </div>
            <%--密码--%>
            <div class="form-group" style="margin-top: 50px">
                <label for="inputPassword" class="col-sm-2 control-label">密码</label>
                <div class="col-sm-10">
                    <input name="password" type="password" class="form-control" id="inputPassword" placeholder="请输入密码"/>
                </div>
            </div>
            <br/>
            <%--记住账号密码--%>
            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <div class="checkbox">
                        <label>
                            <input type="checkbox"/>
                            <div style="color: #454141;"> 记住账号密码</div>
                        </label>
                    </div>
                </div>
            </div>
            <%--提交--%>
            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <input id="submit" value="登录" type="submit" class="btn btn-default"/>
                </div>
            </div>
        </form>
    </div>
</div>

<%@include file="../../pages/common/foot.jsp" %>
</body>
</html>
